<template>
  <div class="main">
    <div class="left">
      <Item v-for="e in h" :key="e" :num="e" />
    </div>
    <div class="center">
      <h2>长短,相对之谓</h2>
      ( 参数:1 : 10 px )
    </div>
    <div class="bottom">
      <ItemX v-for="e in w" :key="e" :num="e" />
    </div>
  </div>
</template>
<script>
import Item from "./AppItem.vue";
import ItemX from "./AppItemx.vue";
export default {
  name: "App",
  components: { Item, ItemX },

  data() {
    return {
      w: window.innerWidth,
      h: window.innerHeight,
    };
  },
  created() {
    var th = this;
    window.addEventListener("resize", function () {
      th.load();
    });
    // https://blog.csdn.net/weixin_30563489/article/details/117730856
    document.addEventListener(
      "keydown",
      function (event) {
        if (
          (event.ctrlKey === true || event.metaKey === true) &&
          (event.which === 61 ||
            event.which === 107 ||
            event.which === 173 ||
            event.which === 109 ||
            event.which === 187 ||
            event.which === 189)
        ) {
          event.preventDefault();
        }
      },
      false
    );
    // mobile ios
    window.onload = function () {
      document.addEventListener("touchstart", function (e) {
        console.log("1", e.touches.length);
        if (e.touches.length > 1) {
          e.preventDefault();
        }
      });
      document.addEventListener("gesturestart", function (e) {
        console.log("2");
        e.preventDefault();
      }); 
    };
 
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      this.w = ~~(document.body.clientWidth / 50);
      this.h = ~~(document.body.clientHeight / 50);
    },
  },
};
</script>
<style scoped>
.main {
  background: #fff;
}
.left {
  width: 50px;
  background: rgba(0, 0, 0, 0);
  height: 100vh;
  overflow: hidden;
}
.bottom {
  width: 100vw;
  height: 50px;
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0);

  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-left: 50px;
}
.center {
  position: absolute;
  width: 50vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}
</style>